<template>
    <div class="section" style="background: #444">
        <div class="detail_left">
            <div class="left_content">
                <p class="title">事件列表</p>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
        <div class="detail_right">
            <div class="detail_right_top">
                <p class="top_title">基本信息 <span style="float: right;margin-right: 50px">信息更新时间： 2018.06.12</span></p>
                <div class="detail_right_top_content">
                    <div class="img"></div>
                    <div class="message">
                        <ul>
                            <li v-for="(item, i) in message" :style="{background: i % 2 !== 0 ? '#fff': '#e5e5e5'}">{{item.name}}: &nbsp;&nbsp;&nbsp; {{item.msg}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="detail_right_center">
                <div class="data">
                    <p class="top_title">相关数据</p>
                    <ul class="table_tab">
                        <li v-for="(item, i) in tableTab" @click="tableTabIndex = i" :style="{background: tableTabIndex === i ? '#d2d2d2' : '#fff'}">{{item.name}}</li>
                    </ul>
                    <ul class="table">
                        <li>
                            <span>标题</span>
                            <span>链接</span>
                        </li>
                        <li v-for="(item, i) in relationData" :style="{background: i % 2 !== 0 ? '#efefef' : '#fff'}">
                            <span>
                                {{item.name}}
                            </span>
                            <span>
                                {{item.link}}
                            </span>
                        </li>
                    </ul>
                </div>
                <div>
                    <p class="top_title">相关事件</p>
                    <ul class="relation_event">
                        <li>
                            <span>事件名称</span>
                            <span>事件类型</span>
                            <span>属性</span>
                        </li>
                        <li v-for="(item, i) in relationData" :style="{background: i % 2 !== 0 ? '#efefef' : '#fff'}">
                            <span>
                                {{item.name}}
                            </span>
                            <span>
                                {{item.name}}
                            </span>
                            <span>
                                {{item.link}}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="detail_right_bottom">
                <bottom-item v-for="(item, i) in bottomTitles" :type="i" :name="item.name"></bottom-item>
            </div>
        </div>
    </div>
</template>
<script>
    import PaneItem from './pane_item/paneItem';
    import BottomItem from './bottom_item/bottomItem';
    export default {
        name: "detail-message",
        components: {
            PaneItem,
            BottomItem
        },
        data() {
            return {
                bottomTitles: [
                    {name: '目标影像'},
                    {name: '目标视频'},
                    {name: '损伤度评估和分布'},
                    {name: '爆炸压力分布'}
                ],
                tableTab: [
                    {name: '基本信息整编文档'},
                    {name: '内部动态整编信息'},
                    {name: '开源情报中关于实体的信息'}
                ],
                tableTabIndex: 0,
                relationData: [
                    {name: '标题名称', link: 'http://www.baidu.com'},
                    {name: '标题名称', link: 'http://www.baidu.com'},
                    {name: '标题名称', link: 'http://www.baidu.com'},
                    {name: '标题名称', link: 'http://www.baidu.com'},
                    {name: '标题名称', link: 'http://www.baidu.com'},
                    {name: '标题名称', link: 'http://www.baidu.com'}
                ],
                message: [
                    {name: '实体名称', msg: 'xxx雷达站'},
                    {name: '地位作用', msg: '苗栗县乐山山顶'},
                    {name: '组成分布', msg: 'ss目标状况'},
                    {name: '地理位置', msg: 'xxx位于wxx市东南xxxx千米处'},
                    {name: '地形情况', msg: ''},
                    {name: '防御设施', msg: ''},
                    {name: '气象状况', msg: ''}
                ],
                events: {
                    leftList: [
                        {title: '属性', des: '描述描述描述描述描述描述描述描述描述描述'},
                        {title: '状态', des: '描述描述描述描述描述描述描述描述描述描述'},
                        {title: '标注', des: '描述描述描述描述描述描述描述描述描述描述'}
                    ],
                    rightList: [
                        {title: '相关事件', des: '描述描述描述描述描述描述描述描述描述描述'},
                        {title: '相关实体', des: '描述描述描述描述描述描述描述描述描述描述'},
                        {title: '相关数据', des: '描述描述描述描述描述描述描述描述描述描述'}
                    ]
                },
                setting: {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    view: {
                        fontCss: {color: "#fff", 'font-size': '20px!important'}
                    }
                },
                zNodes: [
                    {id: 1, pId: 0, name: "中国", open: true, icon: 'globle/js/img/diy/3.png'},
                    {id: 11, pId: 1, name: "体系1", open: true, icon: 'globle/image/radar_green.png'},
                    {id: 111, pId: 11, name: "xx雷达站", icon: 'globle/image/radar_red.png'},
                    {id: 2, pId: 0, name: "美国", open: true, icon: 'globle/js/img/diy/3.png'},
                    {id: 21, pId: 2, name: "体系1", icon: 'globle/image/radar_red.png'},
                    {id: 22, pId: 2, name: "体系2", open: true, icon: 'globle/image/radar_red.png'},
                    {id: 222, pId: 22, name: "雷达站", icon: 'globle/image/radar_green.png'},
                    {id: 3, pId: 0, name: "日本", icon: 'globle/js/img/diy/3.png'}
                ]
            }
        },
        mounted() {
            $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
        },
        methods: {}
    }
</script>

<style lang="less" type="text/less" scoped>
    @import "detaileMessage";
</style>